<div ng-click="canvasClick($event)">
  <svg>
    <defs>
      <marker class="fc-arrow-marker" ng-attr-id="{{arrowDefId}}" markerWidth="5" markerHeight="5" viewBox="-6 -6 12 12" refX="10" refY="0" markerUnits="strokeWidth" orient="auto">
        <polygon points="-2,0 -5,5 5,0 -5,-5" stroke="gray" fill="gray" stroke-width="1px"/>
      </marker>
      <marker class="fc-arrow-marker-selected" ng-attr-id="{{arrowDefId}}-selected" markerWidth="5" markerHeight="5" viewBox="-6 -6 12 12" refX="10" refY="0" markerUnits="strokeWidth" orient="auto">
        <polygon points="-2,0 -5,5 5,0 -5,-5" stroke="red" fill="red" stroke-width="1px"/>
      </marker>
    </defs>
    <g ng-repeat="edge in model.edges">
      <path
        ng-attr-id="{{'fc-edge-path-'+$index}}"
        ng-mousedown="edgeMouseDown($event, edge)"
        ng-click="edgeClick($event, edge)"
        ng-dblclick="edgeDoubleClick($event, edge)"
        ng-mouseover="edgeMouseOver($event, edge)"
        ng-mouseenter="edgeMouseEnter($event, edge)"
        ng-mouseleave="edgeMouseLeave($event, edge)"
        ng-attr-class="{{(modelservice.edges.isSelected(edge) && flowchartConstants.selectedClass + ' ' + flowchartConstants.edgeClass) || edge == mouseOver.edge && flowchartConstants.hoverClass + ' ' + flowchartConstants.edgeClass || edge.active && flowchartConstants.activeClass + ' ' + flowchartConstants.edgeClass || flowchartConstants.edgeClass}}"
        ng-attr-d="{{getEdgeDAttribute(modelservice.edges.sourceCoord(edge), modelservice.edges.destCoord(edge), edgeStyle)}}"
        ng-attr-marker-end="url(#{{modelservice.edges.isSelected(edge) ? arrowDefId+'-selected' : arrowDefId}})"></path>
    </g>
    <g ng-if="dragAnimation == flowchartConstants.dragAnimationRepaint && edgeDragging.isDragging">

      <path class="{{ flowchartConstants.edgeClass }} {{ flowchartConstants.draggingClass }}"
            ng-attr-d="{{getEdgeDAttribute(edgeDragging.dragPoint1, edgeDragging.dragPoint2, edgeStyle)}}"></path>
      <circle class="edge-endpoint" r="4" ng-attr-cx="{{edgeDragging.dragPoint2.x}}"
              ng-attr-cy="{{edgeDragging.dragPoint2.y}}"></circle>

    </g>
    <g ng-if="dragAnimation == flowchartConstants.dragAnimationShadow" class="shadow-svg-class {{ flowchartConstants.edgeClass }} {{ flowchartConstants.draggingClass }}" style="display:none">
      <path d=""></path>
      <circle class="edge-endpoint" r="4"></circle>
    </g>
  </svg>
  <fc-node selected="modelservice.nodes.isSelected(node)"
           edit="modelservice.nodes.isEdit(node)"
           under-mouse="node === mouseOver.node"
           node="node"
           mouse-over-connector="mouseOver.connector"
           modelservice="modelservice"
           dragged-node="nodeDragging.draggedNode"
           callbacks="callbacks"
           user-node-callbacks="userNodeCallbacks"
           ng-repeat="node in model.nodes"></fc-node>
  <div ng-if="dragAnimation == flowchartConstants.dragAnimationRepaint && edgeDragging.isDragging"
    ng-attr-class="{{'fc-noselect ' + flowchartConstants.edgeLabelClass}}"
    ng-style="{ top: (getEdgeCenter(edgeDragging.dragPoint1, edgeDragging.dragPoint2).y)+'px',
                left: (getEdgeCenter(edgeDragging.dragPoint1, edgeDragging.dragPoint2).x)+'px'}">
    <div class="fc-edge-label-text">
      <span ng-attr-id="{{'fc-edge-label-dragging'}}" ng-if="edgeDragging.dragLabel">{{edgeDragging.dragLabel}}</span>
    </div>
  </div>
  <div ng-mousedown="edgeMouseDown($event, edge)"
       ng-click="edgeClick($event, edge)"
       ng-dblclick="edgeDoubleClick($event, edge)"
       ng-mouseover="edgeMouseOver($event, edge)"
       ng-mouseenter="edgeMouseEnter($event, edge)"
       ng-mouseleave="edgeMouseLeave($event, edge)"
       ng-attr-class="{{'fc-noselect ' + ((modelservice.edges.isEdit(edge) && flowchartConstants.editClass + ' ' + flowchartConstants.edgeLabelClass) || (modelservice.edges.isSelected(edge) && flowchartConstants.selectedClass + ' ' + flowchartConstants.edgeLabelClass) || edge == mouseOver.edge && flowchartConstants.hoverClass + ' ' + flowchartConstants.edgeLabelClass || edge.active && flowchartConstants.activeClass + flowchartConstants.edgeLabelClass || flowchartConstants.edgeLabelClass)}}"
       ng-style="{ top: (getEdgeCenter(modelservice.edges.sourceCoord(edge), modelservice.edges.destCoord(edge)).y)+'px',
                   left: (getEdgeCenter(modelservice.edges.sourceCoord(edge), modelservice.edges.destCoord(edge)).x)+'px'}"
       ng-repeat="edge in model.edges">
    <div class="fc-edge-label-text">
      <div ng-if="modelservice.isEditable()" class="fc-noselect fc-nodeedit" ng-click="edgeEdit($event, edge)">
        <i class="fa fa-pencil" aria-hidden="true"></i>
      </div>
      <div ng-if="modelservice.isEditable()" class="fc-noselect fc-nodedelete" ng-click="edgeRemove($event, edge)">
        &times;
      </div>
      <span ng-attr-id="{{'fc-edge-label-'+$index}}" ng-if="edge.label">{{edge.label}}</span>
    </div>
  </div>
  <div id="select-rectangle" class="fc-select-rectangle" hidden></div>
</div>
